<template>
	<uni-popup ref="popup" type="bottom">
		<view class="title flex_sbc">
			<image class="icon-size"></image>
			<view class="z-font-32">{{ info.id ? '编辑' : '新建' }}课包</view>
			<image
				:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/close.png'"
				class="icon-size"
				@click="popup.close()"
			></image>
		</view>
		<view class="package">
			<view class="uni-mx-40">
				<view>课包名称</view>
				<input v-model="info.names" placeholder="请输入课程包名" />
				<view class="uni-mt-32 uni-mb-16">课包类型</view>
				<uni-data-select v-model="info.type" :localdata="typeList"></uni-data-select>
				<view v-if="info.type == 1">
					<view class="uni-mt-32 uni-mb-16">总课时</view>
					<input v-model="info.number" type="number" placeholder="请输入总课时" />
				</view>
				<view class="flex_sbc timer">
					<view>有效期</view>
					<view>
						<uni-datetime-picker v-model="info.validityDate" type="date">
							<view class="flex_fsc">
								<view v-if="info.validityDate">{{ info.validityDate }}</view>
								<view v-else class="uni-color-grey z-font-24">请选择有效期</view>
								<image
									:src="setting.oss_pub_domain + '/app-img/icon/more.png'"
									class="icon-size-32"
								></image>
							</view>
						</uni-datetime-picker>
					</view>
				</view>
				<view class="flex_fsc uni-py-30" @click="info.isDefault = info.isDefault ? 0 : 1">
					<image
						v-if="info.isDefault"
						:src="setting.oss_pub_domain + '/app-img/icon/student_selected.png'"
						class="icon-size-32"
					></image>
					<image
						v-else
						:src="setting.oss_pub_domain + '/app-img/icon/student_select.png'"
						class="icon-size-32"
					></image>
					<view style="color: #242933" class="uni-ml-16">设为默认</view>
				</view>
			</view>
			<bottom-box :buts="buts" @change="savePackage" :fixed="false"></bottom-box>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { addCoursePackage, editCoursePackage } from '@/api/player.js';

const { proxy: that } = getCurrentInstance() ,typeList = [
		{
			value: 1,
			text: '课时包'
		},
		{
			value: 2,
			text: '期限包'
		}
	],
	playerInfo = uni.getStorageSync('player-info');
const popup = ref(''), info = ref({});
let editIndex = -1
function open(editInfo, index) {
	info.value = JSON.parse(JSON.stringify(editInfo))
	editIndex = index
	popup.value.open();
}
defineExpose({ open });

const buts = [
		{
			label: '确定',
			bgColor: 'uni-color-main-bg'
		}
	],
	emit = defineEmits(['done']);
function savePackage() {
	const  { id, names, type, number, validityDate, isDefault } = info.value
	if (!names) that.tools.alert('请输入课包名称');
	if (!type) that.tools.alert('请输选择课包类型');
	if (type == 1 && !number) that.tools.alert('请输入总课时');
	if (type == 2 && !validityDate) that.tools.alert('请输选择课包有效期');
	const postData = { stuId: playerInfo.id, id, names, type, number, validityDate, isDefault: isDefault || 0 }
	const funName =  id ? editCoursePackage : addCoursePackage
	funName(postData).then((res) => {
		if (!res) return;
		that.tools.alert(id ? '编辑完成' : '新建成功');
		emit('done', { info: info.value, index: editIndex });
		popup.value.close();
	});
}
</script>
<script>
export default {
	name: 'PackageEdit'
};
</script>

<style lang="scss" scoped>
.title {
	width: 100vw;
	height: 96rpx;
	background: #ffffff;
	border-radius: 24rpx 24rpx 0px 0px;
	border-bottom: 2rpx solid #ebeef5;
	box-sizing: border-box;
	padding: 0 24rpx;
}
.package {
	width: 100vw;
	background: #ffffff;
	padding-top: 40rpx;
	input {
		width: 100%;
		height: 80rpx;
		background: #f7f8fa;
		border-radius: 8rpx;
		margin-top: 16rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		font-size: 28rpx;
	}
}
.timer {
	height: 100rpx;
	margin-top: 34rpx;
	border-bottom: 2rpx solid #f7f8fa;
}
::v-deep .uni-select {
	border: none !important;
	background: #f7f8fa;
	height: 80rpx;
	font-size: 28rpx;
}

::v-deep .uni-select__selector-item {
	font-size: 28rpx;
}
</style>
